<template>
	<view>
		<view class="top">
			<view class="search">
				<u-search placeholder="物流查询" v-model="keyword" bgColor="#FFF" height="40" :showAction="false" searchIconColor="#333333" placeholderColor="#666"></u-search>
			</view>
			<view class="screen">
				<view class="screen-mother" v-if="type===1">
					<picker mode="selector" :range="timeList" range-key="name" @change="timeChange">
						<view class="mother-day active" style="margin-right: 90rpx;">
							<view class="day-title">
								<text>{{timeList[timeIndex].name}}</text>
							</view>
							<view class="day-icon">
								<image src="/static/images/down.png" mode="widthFix"></image>
							</view>
						</view>
					</picker>
					<view class="mother-day" @click="exportSwitch">
						<view class="day-title">
							<text>导出账单</text>
						</view>
						<view class="day-icon">
							<image src="/static/images/down1.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<scroll-view scroll-x="true" class="screen-son" v-else>
					<view class="son-list">
						<view class="son-item" :class="{'active': timeIndex === index}" v-for="(item, index) in timeList" :key="index" @click="timeSwitch(index)">
							<text>{{item.name}}</text>
						</view>
					</view>
				</scroll-view>
				<view class="screen-search">
					<view class="search-input">
						<input type="text" v-model="surname" placeholder="搜索收取件人" placeholder-style="font-size:24rpx;color:#999;font-weight: 500;">
					</view>
					<view class="search-icon">
						<image src="/static/svg/search.svg" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="nav">
				<view class="nav-item" v-for="(item,index) in navList" :style="navIndex === index ? 'font-size: 32rpx;font-weight: bold;' : ''"  :key="index" @click="navChange(index)">
					<text>{{item.title}}</text>
					<view class="nav-active" v-if="navIndex === index"></view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list-nav-block">
				<view class="list-nav">
					<view class="nav-con">
						<view class="list-nav-item" :class="{'list-nav-item-active': type == 1}" @click="listNavClick(1)">
							<text>母单号</text>
						</view>
						
						<view class="list-nav-item" :class="{'list-nav-item-active': type == 2}" @click="listNavClick(2)">
							<text>子单号</text>
						</view>
						
						<view class="list-nav-item" @click="expressDetail(false)">
							<text>快递明细</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="list-con"  v-if="type === 1">
				<view class="list-mother-item" v-for="(item, index) in list" :key="index" @click="mainOrderDetail(item)">
					<view class="mother-item-top">
						<view class="top-left">
							<view class="left-icon" @click.stop="orderSelect(item)">
								<image :src="listSelectedIds.includes(item.logistics_id) ? '/static/images/radio-active.png' : '/static/images/radio.png'" mode="widthFix"></image>
							</view>
							<view class="left-order">
								<text>{{item.warehouse_items_type}}：</text>
								<view class="order-txt">
									<text @click.stop="mainOrderNumTap(item.logistics_sn)">{{item.logistics_sn}}</text>
									<image class="copy-icon" @click.stop="copyStr(item.logistics_sn)" src="/static/images/copy.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
						<view class="top-right">
							<text>{{item.delivery_site_name}}</text>
						</view>
					</view>
					<view class="mother-item-center">
						<view class="center-top">
							<view class="center-top-left">
								<text>{{item.record_action_time || item.add_time}}</text>
							</view>
							<view class="center-top-right">
								<text>{{item.record_action}}</text>
							</view>
						</view>
						<view class="center-title">
							<view class="title-item">
								<text>{{item.channel_name}}</text>
							</view>
							<view class="title-item">
								<text>{{item.good_type}}</text>
							</view>
						</view>
						<view class="center-info">
							<view class="info-item">
								<text>总件数：{{item.logistics_child_count}}件</text>
							</view>
							<view class="info-item">
								<text>收费重：{{item.good_weight_all_ceil}}kg</text>
							</view>
							<view class="info-item">
								<text>材积：{{item.volume_ceil}}</text>
							</view>
						</view>
						<view class="center-price">
							<view class="price-left">
								<view class="price-left-top">
									<view class="price-item">
										<text>人民币: </text>
										<text class="price">¥{{item.dispatch_fee_total}}</text>
									</view>
									<view class="price-item">
										<text>{{ item.currencyname || '' }}: </text>
										<text class="price">{{item.dispatch_pay_total_tai}}</text>
									</view>
								</view>
								<view class="price-left-bottom">
									<text>{{item.username}}</text>
								</view>
							</view>
							<view class="price-hr"></view>
							<view class="price-right">
								<view class="price-right-top">
									<view class="price-item">
										<text>代收款: </text>
										<text class="price">{{item.acting_mat_fee}}</text>
									</view>
								</view>
								<view class="price-right-bottom">
									<text>{{item.pick_name}}</text>
								</view>
							</view>
						</view>
						
					</view>
					<view class="mother-item-bottom">
						<view class="create_time">
							<!-- <view>下单时间：{{item.add_time || ''}}</view> -->
							<view>下指令时间：{{item.expect_time || ''}}</view>
						</view>
						<view class="bottom-right">
							<text>{{item.play}}：</text>
							<text>{{item.charge_offs_type}}</text>
						</view>
					
						<!-- <view class="freight">
							<text class="title">运费估算：</text>
							<text class="txt">人民币:</text>
							<text class="txt active">￥{{item.dispatch_fee}}</text>
							<text class="txt">台币:</text>
							<text class="txt active">NT{{item.dispatch_fee_tai}}</text>
						</view> -->
					</view>
					<view class="operation-btn">
						<view class="express-detail-btn" @click.stop="expressDetail(item)">快递明细</view>
						<view class="goods-cargo-status-btn" @click.stop="cargoStatusDetail(item)">货态详情</view>
						<view class="express-detail-btn" @click.stop="newAddCostDetail(1,item)">二次费用</view>
						<view class="goods-cargo-status-btn" @click.stop="newAddCostDetail(2,item)">代垫费用</view>
					</view>
				</view>
			</view>
			
			<view class="list-con" v-if="type === 2">
				<view class="list-son-item" v-for="(item, index) in list" :key="index">
					<view class="son-item-top">
						<view class="top-left">
							<text>{{item.warehouse_items_type}}</text>
						</view>
						<view class="top-right">
							<text>{{item.delivery_site_name}}</text>
						</view>
					</view>
					<view class="son-item-center">
						<view class="center-top">
							<view class="center-top-left">
								<text class="status-txt">{{item.state_wuliu}}</text>
								<text>{{item.state_wuliu_time || ''}}</text>
							</view>
							<view class="center-top-right">
								<!-- <text>收件：{{item.pick_name}} 取件：{{item.username}}</text> -->
								<text>{{item.pick_name}}</text>
							</view>
						</view>
						<view class="center-list">
							<view class="center-list-left">
								<view class="list-left-item" v-if="item.logistics_child_sn">
									<view class="item-title">
										<text>物流单号：{{item.logistics_child_sn}}</text>
									</view>
									<view class="item-icon" @click="copyStr(item.logistics_child_sn)">
										<image src="/static/images/copy.png" mode="widthFix"></image>
									</view>
								</view>
								
								<view class="list-left-item" v-if="item.dispatch_logistics_number">
									<view class="item-title">
										<text>转运单号：{{item.dispatch_logistics_number}}</text>
									</view>
									<view class="item-icon" @click="copyStr(item.dispatch_logistics_number)">
										<image src="/static/images/copy.png" mode="widthFix"></image>
									</view>
								</view>
								
								<!-- <view class="list-left-item" v-if="item.logistics_number_list && item.logistics_number_list.length">
									<view class="item-title">
										<text>快递单号：{{item.logistics_number_list.toString()}}</text>
									</view>
									<view class="item-icon" @click="copyStr(item.logistics_number_list.toString())">
										<image src="/static/images/copy.png" mode="widthFix"></image>
									</view>
								</view> -->
								
								<view class="list-left-item" v-for="(numItem, numIndex) in item.logistics_number_list" :key="numIndex">
									<view class="item-title">
										<text>国内单号：{{numItem}}</text>
									</view>
									<view class="item-icon" @click="copyStr(numItem)">
										<image src="/static/images/copy.png" mode="widthFix"></image>
									</view>
								</view>
							</view>
							<view class="center-list-right">
								<view class="right-item">
									<text>{{item.good_quantity}}</text>
								</view>
								<view class="right-item">
									<text>重量：{{item.good_weight_all}}kg</text>
								</view>
							</view>
						</view>
					</view>
					<view class="son-item-bottom">
						<view class="bottom-left">
							<text>{{item.channel_name}}</text>
							<text>{{item.good_type}}</text>
						</view>
						<view class="bottom-right" v-if="item.pack_time">
							<text>打包：{{item.pack_time}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<u-loadmore :status="loadStatus" height="80rpx" />
		</view>
		<view class="bottom" v-if="type === 1">
			<view class="bottom-content">
				<view class="bottom-left">
					<view class="left-select" @click="orderSelectAll">
						<view class="seclet-icon">
							<image :src="orderSelectAllStatus ? '/static/images/radio-active.png' : '/static/images/radio.png'" mode="widthFix"></image>
						</view>
						<view class="select-title">
							<text>全选</text>
						</view>
					</view>
					<view class="left-price">
						<text>总运费：</text>
						<text>￥{{selectPrice || 0}}</text>
					</view>
				</view>
				<view class="bottom-right" @click="freightSettlement">
					<text>结算运费</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import {mapState, mapMutations} from 'vuex';
	import {getMainOrderList, getSonOrderList, freightSettlementJudge} from '@/api/order.js';
	export default {
		data() {
			return {
				keyword: '',
				surname: '',
				type: 1,
				page: 1,
				loadStatus: 'loadmore',
				timeList: [
					{
						name:'全部',
						key: ''
					},
					{
						name:'今天',
						key: 'today'
					},
					{
						name:'昨天',
						key: 'yestoday'
					},
					{
						name:'1周',
						key: 'last_weekday'
					},
					{
						name:'1月',
						key: 'last_monthday'
					}
				],
				timeIndex: 0,
				navList: [
					{title: '全部', value: 0},
					{title: '待付款', value: 1},
					{title: '待签收', value: 3}
				],
				navIndex: 0,
				list: [],
				listSelectedIds: [],
				selectPrice: ''
			}
		},
		async onShow() {
			if (!this.isLogin) {
				uni.reLaunch({
					url: '/pages/login/index'
				});
				return;
			}
			this.keyword = '';
			this.surname = '';
			this.type = 1;
			let navIndex = 0;
			if (app.globalData.orderPageCondition?.navIndex) {
				let navValue = app.globalData.orderPageCondition?.navIndex;
				this.navList.every((item, index) => {
					if (item.value == navValue) {
						navIndex = index;
						return false;
					}
					return true;
				});
				app.globalData.orderPageCondition.navIndex = 0;
			}
			this.navIndex = navIndex;
			this.listSelectedIds = [];
			this.selectPriceCalculation();
			this.page = 1;
			this.loadStatus = 'loadmore';
			await this.loadData();
		},
		async onPullDownRefresh() {
			await this.pullOrderList();
			uni.stopPullDownRefresh();
		},
		async onReachBottom() {
			await this.loadData();
		},
		watch: {
			async keyword() {
				await this.pullOrderList();
			},
			async surname() {
				await this.pullOrderList();
			}
		},
		computed: {
			...mapState(['data', 'isLogin']),
			orderSelectAllStatus() {
				return (this.list && this.list.length) ? this.listSelectedIds.length == this.list.length : false;
			}
		},
		methods: {
			...mapMutations(['logout']),
			expressDetail(item = false) {
				uni.navigateTo({
					url: `/pages/order/express-detail?order=${item?.logistics_sn || ''}`
				});
			},
			cargoStatusDetail(item) {
				uni.setStorageSync('searchlogisticSn', item.logistics_sn);
				uni.switchTab({
					url: `/pages/search/index`
				});
			},

			/**  二次费用和代垫费用
			 * type
			 * @type的1是二次费用2是代垫费他 
			 */
			newAddCostDetail(type,item){
				uni.navigateTo({
					url: `/pages/order/tableDetail?tableType=${type}&order=${item?.logistics_sn || ''}`
				});
			},
			

			async freightSettlement() {
				try{
					if (!this.listSelectedIds || !this.listSelectedIds.length) {
						uni.showToast({
							title: '请选择订单',
							icon: 'none'
						});
						return;
					}
					let res = await freightSettlementJudge(this.listSelectedIds);
					let ids = encodeURIComponent(JSON.stringify(this.listSelectedIds));
					uni.navigateTo({
						url: `/pages/recharge/index?rmb=${res.data.rmb}&tb=${res.data.tabi}&ids=${ids}`
					});
				}catch(e){
					console.log(e);
				}
			},
			mainOrderDetail(item) {
				uni.navigateTo({
					url: `/pages/order/out-warehousing-edit?type=express&title=母单号&id=${item.logistics_id}`
				});
			},
			orderSelectAll() {
				if (!this.list || !this.list.length) {
					return;
				}
				this.listSelectedIds = this.orderSelectAllStatus ? [] : this.list.map(item => item.logistics_id);
				this.selectPriceCalculation();
			},
			orderSelect(item) {
				if (this.listSelectedIds.includes(item.logistics_id)) {
					let index = this.listSelectedIds.indexOf(item.logistics_id)
					this.listSelectedIds.splice(index, 1);
				} else {
					this.listSelectedIds.push(item.logistics_id);
				}
				this.selectPriceCalculation();
			},
			selectPriceCalculation() {
				if (!this.listSelectedIds || !this.listSelectedIds.length) {
					this.selectPrice = '';
					return;
				}
				let selectPrice = 0;
				this.list.forEach(item => {
					if (this.listSelectedIds.includes(item.logistics_id)) {
						selectPrice = Number(selectPrice) + Number(item.dispatch_fee_total);
					}
				});
				this.selectPrice = selectPrice;
			},
			mainOrderNumTap(order) {
				this.type = 2;
				this.navIndex = 0;
				this.timeIndex = 0;
				this.surname = '';
				this.listSelectedIds = [];
				this.keyword = order;
			},
			copyStr(str) {
				uni.setClipboardData({
					data: str
				});
			},
			async loadData() {
				try{
					if (this.loadStatus === 'nomore') {
						return;
					}
					this.loadStatus = 'loading';
					let res, data = {
						p: this.page,
						logistics_sn: this.keyword,
						search_time: this.timeList[this.timeIndex].key,
						pick_name: this.surname,
						username: this.surname,
						state_order: this.navList[this.navIndex].value
					};
					if (this.type == 1) {
						res = await getMainOrderList(data);
					} else {
						res = await getSonOrderList(data);
					}
					this.loadStatus = 'loadmore';
					let list = res.data || [];
					if (!list || !list.length) {
						this.loadStatus = 'nomore';
					}
					this.list = [...(this.page === 1 ? [] : this.list), ...list];
					this.page++;
				}catch(e){
					this.loadStatus = 'loadmore';
				}
			},
			async pullOrderList() {
				this.page = 1;
				this.loadStatus = 'loadmore';
				this.listSelectedIds = [];
				this.list = [];
				this.selectPriceCalculation();
				await this.loadData();
			},
			async navChange(index) {
				if (this.navIndex == index) {
					return;
				}
				this.navIndex = index;
				this.listSelectedIds = [];
				await this.pullOrderList();
			},
			async exportSwitch() {
				try{
					let data = {
						logistics_sn: this.keyword,
						search_time: this.timeList[this.timeIndex].key,
						pick_name: this.surname,
						username: this.surname,
						user_id: this.data?.user?.user_id
					};
					/* uni.showLoading({
						title: '加载中'
					}); */
					
					
					let formEl = document.createElement('form');
					formEl.action = this.$domain + 'index.php/user/orderV2/exportUsersModule';
					formEl.method = 'get';
					formEl.style.display = 'none';
					for (let key in data) {
						let inputEl = document.createElement('input');
						inputEl.name = key;
						inputEl.value = data[key];
						formEl.appendChild(inputEl);
					}
					document.body.appendChild(formEl);
					formEl.submit();
					formEl.remove();
					return;
					
					
					
					let [err, res] = await uni.request({
						url: this.$domain + 'index.php/user/orderV2/exportUsersModule',
						method: 'POST',
						data,
						header: {
							token: this?.data?.token
						},
						responseType: 'arraybuffer'
					});
					if (err !== null) {
						throw new Error(err.errMsg);
					}
					res = res.data;
					if (res.status === 100) {
						this.logout();
						uni.reLaunch({
							url: '/pages/login/index'
						});
						return;
					}
					let blob = new Blob([res]),
						url = URL.createObjectURL(blob),
						filename = '订单' + Number(new Date()) + '.xlsx',
						aEl = document.createElement('a');
					aEl.download = filename;
					aEl.style.display = 'none';
					aEl.href = url;
					document.body.appendChild(aEl);
					aEl.click();
					URL.revokeObjectURL(url);
					aEl.remove();
					uni.hideLoading();
				}catch(e){
					uni.hideLoading();
					uni.showToast({
						title: e.message,
						icon: 'none'
					});
					console.log(e);
				}
			},
			async timeSwitch(index) {
				if (this.timeIndex == index) {
					return;
				}
				this.timeIndex = index;
				this.listSelectedIds = [];
				await this.pullOrderList();
			},
			async timeChange(event) {
				let index = event.detail.value;
				if (this.timeIndex == index) {
					return;
				}
				this.timeIndex = index;
				this.listSelectedIds = [];
				await this.pullOrderList();
			},
			async listNavClick(type){
				if(type != this.type){
					this.navIndex = 0;
					this.type = this.type == 1 ? 2 : 1;
					this.keyword = '';
					this.surname = '';
					this.timeIndex = 0;
					this.listSelectedIds = [];
					await this.pullOrderList();
				}
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #FFF;
}
.top{
	background-color: #F5F5F5;
	padding: 30rpx 30rpx 10rpx 30rpx;
	box-sizing: border-box;
	position: sticky;
	top: 0;
	z-index: 5;
	.search{
		
	}
	.screen{
		padding-top: 24rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.screen-mother{
			padding-left: 18rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.mother-day{
				display: flex;
				justify-content: center;
				align-items: center;
				.day-title{
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
					padding-right: 8rpx;
				}
				.day-icon{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 20rpx;
					height: 20rpx;
					image{
						width: inherit;
						height: inherit;
					}
				}
			}
			
			.mother-day.active .day-title {
				font-weight: 600;
			}
		}
		
		.screen-son{
			width: 400rpx;
			height: 48rpx;
			white-space: nowrap;
			.son-list{
				width: 100%;
				height: inherit;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.son-item{
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 36rpx;
					height: inherit;
					font-size: 28rpx;
					font-weight: 500;
					color: #666;
					transition: all .3s; 
				}
				.active{
					font-weight: bold;
					color: #333;
					transition: all .3s; 
				}
			}
		}
		.screen-search{
			width: 260rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 6rpx;
			box-sizing: border-box;
			.search-input{
				width: 180rpx;
				height: inherit;
				input{
					padding-left: 6rpx;
					box-sizing: border-box;
					width: inherit;
					height: inherit;
					font-size: 24rpx;
					color: #333;
				}
			}
			.search-icon{
				width: 64rpx;
				height: 48rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #E6E6E6;
				border-radius: 24rpx;
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
	.nav{
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 80rpx;
		width: 100%;
		.nav-item{
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			height: inherit;
			font-size: 30rpx;
			color: #333;
			font-weight: 500;
			
			.nav-active{
				position: absolute;
				bottom: 0;
				margin: 0 auto;
				width: 34rpx;
				height: 8rpx;
				background: linear-gradient(55deg, #E6201A 0%, #E6201A 0%, #FF3023 100%);
				border-radius: 4rpx;
			}
		}
	}
}
.list{
	width: 100%;	
	
	.list-nav-block {
		width: 100%;
		height: 90rpx;
		
		.list-nav{
			width: inherit;
			height: inherit;
			position: fixed;
			left: 0;
			z-index: 5;
			background-color: #f1f1f1;
			box-shadow: 0rpx -24rpx 28rpx 0rpx rgba(0, 0, 0, 0.03);
			
			.nav-con {
				background-color: #fff;
				border-radius: 32rpx 32rpx 0px 0px;
				padding: 10rpx 30rpx;
				box-sizing: border-box;
				height: 100%;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				.list-nav-item{
					flex: 1;
					height: 56rpx;
					border-radius: 28rpx;
					border: 2rpx solid #CCCCCC;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 30rpx;
					color: #999;
					font-weight: 500;
					margin-right: 30rpx;
				}
				.list-nav-item-active{
					background: linear-gradient(55deg, #E6201A 0%, #E6201A 0%, #FF3023 100%);
					height: 60rpx;
					color: #fff;
					font-weight: bold;
					border: none;
				}
				.list-nav-item:last-child {
					margin-right: 0;
				}
			}
			
		}
	}
	
	.list-con {
		padding: 10rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		
		.list-mother-item{
			width: 100%;
			background: #FFFFFF;
			box-shadow: 2rpx 2rpx 28rpx 0px rgba(0, 0, 0, 0.06);
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			.mother-item-top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 16rpx;
				border-bottom: 2rpx solid #F5F5F5;
				.top-left{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.left-icon{
						width: 34rpx;
						height: 34rpx;
						image{
							width: inherit;
							height: inherit;
						}
					}
					.left-order{
						padding-left: 14rpx;
						font-size: 24rpx;
						color: #333;
						font-weight: bold;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						
						.order-txt {
							display: flex;
							align-items: center;
							justify-content: flex-start;
							
							.copy-icon {
								width: 24rpx;
								height: 24rpx;
								margin-left: 10rpx;
							}
						}
					}
				}
				.top-right{
					font-size: 26rpx;
					color: #333;
					font-weight: bold;
				}
			}
			.mother-item-center{
				.center-top{
					padding-top: 8rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.center-top-left{
						font-size: 24rpx;
						color: #999;
						font-weight: 500;
					}
					.center-top-right{
						font-size: 26rpx;
						color: #E6201A;
						font-weight: bold;
					}
				}
				.center-title{
					padding-top: 20rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.title-item{
						margin-right: 48rpx;
						font-size: 26rpx;
						color: #333;
						font-weight: 500;
					}
				}
				.center-info{
					width: 100%;
					padding: 10rpx 18rpx;
					box-sizing: border-box;
					background: #F5F5F5;
					border-radius: 0rpx 12rpx 12rpx 12rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 14rpx;
					.info-item{
						font-size: 24rpx;
						color: #999;
						font-weight: 500;
					}
				}
				.center-price{
					margin-top: 14rpx;
					width: 100%;
					padding: 14rpx 18rpx;
					box-sizing: border-box;
					background: #F5F5F5;
					border-radius: 0rpx 12rpx 12rpx 12rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.price-left{
						width: 60%;
						.price-left-top{
							display: flex;
							justify-content: flex-start;
							align-items: center;
							font-size: 24rpx;
							.price-item{
								color: #999;
								&:first-child{
									margin-right: 12rpx;
								}
								.price{
									color: #E6201A;
								}
							}
						}
						.price-left-bottom{
							padding-top: 12rpx;
							font-size: 24rpx;
							color: #333;
						}
					}
					.price-hr{
						width: 6rpx;
						height: 44rpx;
						background: #D8D8D8;
						border-radius: 3rpx;
						opacity: 0.39;
					}
					.price-right{
						width: 39%;
						padding-left: 20rpx;
						box-sizing: border-box;
						.price-right-top{
							display: flex;
							justify-content: flex-start;
							align-items: center;
							font-size: 24rpx;
							
							.price-item{
								color: #999;
								.price{
									color: #E6201A;
								}
							}
						}
						.price-right-bottom{
							padding-top: 12rpx;
							font-size: 24rpx;
							color: #333;
						}
					}
				}
			}
			.mother-item-bottom{
				padding-top: 18rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.create_time {
					font-size: 22rpx;
					color: #999;
					line-height: 2em;
				}

				.bottom-left{
					font-size: 24rpx;
					font-weight: 500;
					color: #999;
				}
				.bottom-right{
					font-size: 24rpx;
					text{
						&:first-child{
							color: #333;
						}
						&:last-child{
							color: #E6201A;
						}
					}
				}
				
				.freight {
					.title {
						font-size: 24rpx;
						color: #999;
					}
					
					.txt {
						font-size: 24rpx;
						color: #333;
					}
					
					.txt.active {
						color: #E6201A;
					}
				}
			}
			
			.operation-btn {
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding-top: 20rpx;
				
				.express-detail-btn {
					font-size: 22rpx;
					color: #09f;
					line-height: 2em;
					padding: 0 15rpx;
					border: 1rpx solid #09f;
					box-sizing: border-box;
					border-radius: 16rpx;
				}
				
				.goods-cargo-status-btn {
					font-size: 22rpx;
					color: #E6201A;
					line-height: 2em;
					padding: 0 15rpx;
					border: 1rpx solid #E6201A;
					box-sizing: border-box;
					border-radius: 16rpx;
				}
			}
		}
		
		.list-son-item{
			width: 100%;
			background: #FFFFFF;
			box-shadow: 2rpx 2rpx 28rpx 0px rgba(0, 0, 0, 0.06);
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			.son-item-top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 16rpx;
				border-bottom: 2rpx solid #F5F5F5;
				.top-left{
					font-size: 24rpx;
					color: #333;
					font-weight: bold;
				}
				.top-right{
					font-size: 26rpx;
					color: #333;
					font-weight: bold;
				}
			}
			.son-item-center{
				padding-top: 8rpx;
				.center-top{
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.center-top-left{
						font-size: 24rpx;
						color: #999;
						font-weight: 500;
					}
					
					.status-txt {
						font-size: 26rpx;
						color: #E6201A;
						font-weight: bold;
						padding-right: 15rpx;
					}
					
					.center-top-right{
						font-size: 24rpx;
						color: #999;
						font-weight: 500;
					}
				}
				.center-list{
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					padding-top: 28rpx;
					overflow: hidden;
					
					.center-list-left{
						flex: 1;
						overflow: hidden;
						
						.list-left-item{
							margin-bottom: 10rpx;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							overflow: hidden;
							
							.item-title{
								font-size: 24rpx;
								color: #666;
								font-weight: 500;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							.item-icon{
								margin-left: 20rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								image{
									width: 20rpx;
									height: 20rpx;
								}
							}
						}
					}
					.center-list-right{
						margin-left: 30rpx;
						.right-item{
							text-align: right;
							margin-bottom: 10rpx;
							font-size: 24rpx;
							color: #333;
							font-weight: 500;
						}
					}
				}
			}
			.son-item-bottom{
				padding-top: 22rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.bottom-left{
					font-size: 26rpx;
					color: #333;
					font-weight: 500;
					text{
						&:first-child{
							margin-right: 48rpx;
						}
					}
				}
				.bottom-right{
					font-size: 24rpx;
					color: #999;
					font-weight: 500;
				}
			}
		}
		
		.list-mother-item:last-of-type,
		.list-son-item:last-of-type {
			margin-bottom: 0;
		}
	}
	
}
.bottom{
	width: 100%;
	height: 100rpx;
	.bottom-content{
		padding: 0 30rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: calc(var(--window-bottom));
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100rpx;
		background: #F5F5F5;
		border-radius: 20rpx 20rpx 0px 0px;
		.bottom-left{
			width: 432rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left-select{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.seclet-icon{
					display: flex;
					justify-content: center;
					align-items: center;
					image{
						width: 40rpx;
						height: 40rpx;
					}
				}
				.select-title{
					margin-left: 12rpx;
					font-size: 24rpx;
					color: #999;
					font-weight: 500;
				}
			}
			.left-price{
				text{
					&:first-child{
						font-size: 24rpx;
						color: #5F6166;
						font-weight: bold;
					}
					&:last-child{
						font-size: 32rpx;
						color: #E6201A;
						font-weight: bold;
					}
				}
			}
		}
		.bottom-right{
			width: 200rpx;
			height: 72rpx;
			background: #E82E2E;
			border-radius: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFF;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
}
</style>
